<style type="text/css">
body { 
	padding: 0 5px;
	font-family: Verdana, sans-serif;
	background-color: #DDD;
}
ul, li, h4, h3, h2, h1, p {
	padding:0;
	margin:0;
	list-style:none;
}

.next, .prev {
	cursor:pointer;
}

#divprodrot {
	position:relative;
	height:425px;
	width:525px;
	margin-top:40px;
}
	#divprodrot .next, #divprodrot .prev {
		position:absolute;
		top:200px;
	}
	#divprodrot .prev {
		left:10px;
	}
	#divprodrot .next {
		right:10px;
	}
	

#tbSections {
	position:relative;
	overflow:hidden;
	background-color:white;
	width:400px;
	height:369px;
	clear:left;
	margin-left:62px;
}
	
	#tbSections ul {
		width:5660px;
	}
	
		#tbSections li {
			float:left;
			height: 350px;
			width: 350px;
			padding:11px 30px;
		}
			#tbSections li.fallen {
				margin-top:369px;
			}
			#tbSections p {
				width:350px;
				margin:16px 0;
				font-size:85%;
				line-height:1.4em;
			}
			#tbSections h2 {
				color:#993333;
				margin:20px 0pt;
			}
			#tbSections a {
				color:#777;
				font-weight:bolder;
				text-decoration:none;
			}
			#tbSections div {
				position: relative;
				width:340px;
			}

</style>

<script type="text/javascript">
	window.numProds = 0;
	pagina = "comparacaoMulti";
	window.resizeCompMulti = function() {
		resize();
	}

	window.formataDivScroll = function() {
		//alert("formatdivscroll...");
		//$("#divProdutoRotacao").css("border","3px solid red");
		//$("#scrollBar").jScrollPane();
		//alert("formatdivscroll ok");
		//window.startScroll();
		window.addSection();
	}

	window.moveToLast = function() {
		$('#tbSections').trigger( 'goto', [ (window.numProds - 1) ] );
	}

	window.startScroll = function() {
		//alert("x");

		$.easing.elasout = function(x, t, b, c, d) {
			var s=1.70158;var p=0;var a=c;
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
		};
		
		$('#divprodrot').serialScroll({
			target:'#tbSections',
			items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
			prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'img.next',// Selector to the 'next' button (absolute too)
			axis:'xy',// The default is 'y' scroll on both ways
			duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
			force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
							
			onBefore:function( e, elem, $pane, $items, pos ){
				 //those arguments with a $ are jqueryfied, elem isn't.
				 //alert("anterior");
				//alert("#tbSections.trigger = " + $('#tbSections').trigger);
				//alert("pane = " + $pane.innerHTML);
				//alert("pos = " + pos);
				if (pos >= window.numProds) {
					//$('#tbSections').stop().scrollTo( '0px', '0px' );
					if (pos == 20) {
						$pane.trigger( 'goto', [ (window.numProds - 1) ] );
					} else {
						$pane.trigger( 'goto', [ 0 ] );
					}
					return false;
				}
				e.preventDefault();
				if( this.blur )
					this.blur();
			},
			onAfter:function( elem ){
				//alert("proximo");
				//'this' is the element being scrolled ($pane) not jqueryfied
			}
		});

		//alert("y");
	}

	window.addSection = function() {
		alert("add Section ini..");
		var $ulSection = $('#ulSections');
		var	$items = $ulSection.find('li');
		var num = $items.length;
		alert("num Lis= " + num);

		$("<li><div id='divtest" + num + "'>" + num + "</div></li>").appendTo("#ulSections");
		alert("add Section fim..");
	}

</script>

<div id="divMain" style="position: absolute; top: 30px; width: 100%; height: 100%; border: thin solid yellow;">

	<div id="playn-root" style="position: absolute; width: 450px; height: 300px; border: medium solid white;">
	</div>

	<div id="divSelProdMulti" style="position: absolute; top: 15px; left: 451px; width: 32px; height: 32px;">
	</div>
	<div id="divProdutoMulti" style="position: absolute; top: 57px; left: 451px; width: 230px; height: 400px; float: left; border: thin solid purple;">
	</div>

	<div id="divprodrot" style="position: relative; left: 681px;">
		<img class="prev" src="/images/prev.gif" alt="prev" width="42" height="53" />
		<div id="tbSections">
			<ul id="ulSections">
				<li>
					<div id="divtest0">0</div>
				</li>
				<li>
					<div id="divtest1">1</div>
				</li>
				<li>
					<div id="divtest2">2</div>
				</li>
				<li>
					<div id="divtest3">3</div>
				</li>
				<li>
					<div id="divtest4">4</div>
				</li>
				<li>
					<div id="divtest5">5</div>
				</li>
				<li>
					<div id="divtest6">6</div>
				</li>
				<li>
					<div id="divtest7">7</div>
				</li>
				<li>
					<div id="divtest8">8</div>
				</li>
				<li>
					<div id="divtest9">9</div>
				</li>
				<li>
					<div id="divtest10">10</div>
				</li>
				<li>
					<div id="divtest11">11</div>
				</li>
				<li>
					<div id="divtest12">12</div>
				</li>
				<li>
					<div id="divtest13">13</div>
				</li>
				<li>
					<div id="divtest14">14</div>
				</li>
				<li>
					<div id="divtest15">15</div>
				</li>
				<li>
					<div id="divtest16">16</div>
				</li>
				<li>
					<div id="divtest17">17</div>
				</li>
				<li>
					<div id="divtest18">18</div>
				</li>
				<li>
					<div id="divtest19">19</div>
				</li>
				<li>
					<div id="divtest20">20</div>
				</li>
			</ul>
		</div>
		<img class="next" src="/images/next.gif" alt="next" width="42" height="53" />
	</div>

	<div id="divPergunta" style="position: absolute; top: 460px; width: 100%; height: 150px; float: left; background-color: #4682B4;">
	</div>

</div>

<!-- 
<script type="text/javascript" src='/qualomelhor.gwt.modules.TestePlayN/qualomelhor.gwt.modules.TestePlayN.nocache.js'></script>
 -->
<script type="text/javascript" src='/qualomelhor.gwt.modules.Comparacao3Coisas/qualomelhor.gwt.modules.Comparacao3Coisas.nocache.js'></script>

<script type="text/javascript">
	window.startScroll();
	//alert("carregou!");
</script>